<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>发布</title>

	<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/app.css" />
	<!-- 引入样式文件 -->
	<link
	  rel="stylesheet"
	  href="../../../css/vant.css"
	/>
	<style type="text/css">
		body {
			background-color: #F5F5F5;
		}

		input[type="text"] {
			height: 2.5rem;
		}

		textarea {
			padding-top: 0.85rem;
			height: 8rem;
		}

		.biaoti textarea {
			height: 4rem;
		}

		::placeholder:nth-child(1) {
			font-size: 1rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(187, 187, 187, 1);
		}

		::placeholder:nth-child(2) {
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(187, 187, 187, 1);
		}

		.aui-row {
			margin: 0.75rem 0.25rem;
		}

		.aui-row img {
			border-radius: 0.25rem;
		}

		.aui-row .img {
			object-fit: cover;
			width: 100%;
			height: calc((100vw - 0.5rem) / 3 - 0.5rem);
		}

		.aui-row-padded [class*=aui-col-xs-] {
			padding: 0.25rem;
		}



		.btn {
			/*padding: 4.5rem 0.5rem 2rem 0.5rem;
				width: 100%;*/
		}

		.btn-delete {
			position: absolute;
			width: 1rem;
			right: 0rem;
			top: -.5rem;
			z-index: 20;
		}

		.aui-row {
			overflow: unset;
		}

		.aui-dialog-body {
			overflow: auto !important;
			max-height: 60vh !important;
		}

		.biaoti textarea::placeholder {
			color: #BBBBBB;
			font-size: 1rem;
		}

		.count {
			position: absolute;
			display: inline-block;
			right: 0.3rem;
			width: 1.8rem;
			height: 0.85rem;
			font-size: 0.6rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(187, 187, 187, 1);
			line-height: 0.85rem;
			bottom: 0.55rem;
			border-bottom: none;
			padding-bottom: 0.75rem;
		}
		.count1{
			position: relative;
	    display: inline-block;
	    right: -14.7rem;
	    width: 1.8rem;
	    height: 0.85rem;
	    font-size: 0.6rem;
	    font-family: PingFangSC-Regular;
	    font-weight: 400;
	    color: rgba(187, 187, 187, 1);
	    line-height: 0.85rem;
	    bottom: 1.7rem;
	    border-bottom: none;
	    padding-bottom: 0.75rem;
		}

		textarea {
			width: 17.25rem;
			height: 5.05rem;
		}

		.agreement {
			width: 14.75rem;
			height: 15rem;
			background: #fff;
			border-radius: 0.5rem;
			position: fixed;
			left: calc(50% - 7.375rem);
			top: calc(50% - 10.5rem);
			z-index: 1000;
		}

		.title_agreement {
			text-align: center;
			margin-top: 1rem;
			font-size: 0.85rem;
			color: #444444;
			margin-bottom: 0.9rem;
		}

		.btn_agreement {
			width: 100%;
			height: 2.75rem;
			position: absolute;
			bottom: 0;
			display: flex;
			justify-content: space-between;
		}
		.left_btn{
			width: 7.35rem;
			text-align: center;
			color: #999999;
			font-size: 0.8rem;
			height: 2.75rem;
			line-height: 2.75rem;
			font-family:PingFangSC-Regular;
			border-top: 1px solid rgba(238,238,238,0.5);
			border-right: 1px solid rgba(238,238,238,0.5);
		}
		.right_btn{
			width: 7.35rem;
			color: rgba(0,90,147,1);
			font-size: 0.8rem;
			height: 2.75rem;
			line-height: 2.75rem;
			font-family:PingFangSC-Regular;
			text-align: center;
			border-top: 1px solid rgba(238,238,238,0.5);
		}
		.showfbItem{
			height: 2.5rem;
			width: 100%;
			text-align: center;
			line-height: 2.5rem;
			font-size:0.65rem;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(77,77,77,1);
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="" style="position:relative;">
		<div class="" style="position: fixed;background-color: #ffffff;height: 2px;width: 100%;"></div>
		<div class="ming-bg-white" style="margin-bottom: 2rem;">
			<div class="" style="width:100%;position:relative;padding:0 0.75rem 0 0.75rem;color:rgba(179,179,179,1);">
				<textarea v-model="title" placeholder="添加标题" maxlength="30" style="border-bottom:1px solid rgba(230,230,230,1);font-size:1rem;font-family:PingFangSC-Medium;font-weight:500;font-size:1rem;color:rgba(77,77,77,1);"></textarea>
				<span class="count">{{title.length}}/30</span>
			</div>
			<div class="" style="width:100%;background-color:#fff;padding: 0rem 0.7rem 0rem;">
				<div class="" style="width:100%;height:7.7rem;">
					<textarea v-model="content" placeholder="说说你的想法吧~" maxlength="500" style="height:7.7rem;border-bottom:1px solid rgba(230,230,230,1);font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);overflow-y:scroll;"></textarea>
					<span class="count1">{{content.length}}/500</span>
				</div>
			</div>
				<!-- 添加图片 -->
				<div class="" style="height: 100%;background-color:#fff;display:inline-block;width:100%;margin-left:-.08rem;padding:0 .75rem;padding-top:1rem;">
					<div v-for="(vo,index) in imgpath" class="aui-col-xs-2 ming-pr" style="width:20%;margin-bottom:.8rem;">
						<img class="img" :src="vo" style="height:3rem;border-radius:0.2rem;">
						<img class="btn-delete" src="../../../image/btn/btn-close-hui.png" tapmode @click="delimg(index)" style="width:0.8rem;">
					</div>
					<!-- 添加商品的图标 -->
					<div v-if="img.length<3" class="aui-col-xs-2 ming-pr" tapmode @click="showfbimgmenu = true" style="width:20%;">
						<img src="../../../image/bg/addpicture.png" style="height:3rem;margin-bottom:.5rem;" />
					</div>
					<van-action-sheet
						v-model="showfbimgmenu"
						cancel-text="取消"
						close-on-click-action
						@cancel="onCancel"
					>
						<div class="showfbItem" @click="paizhao">拍照</div>
						<div class="" style="width:100%;height:0.1rem;background:rgba(238,238,238,1);"></div>
						<div class="showfbItem" @click="xcXuanze">相册选择</div>
					</van-action-sheet>
				</div>

		</div>

		<div class="aui-clearfix"></div>
		<div class="" tapmode onclick="xyqPublish()" style="text-align: center;margin:auto;width:92%;height:2.3rem;background:rgba(0,90,147,1);border-radius:0.3rem;">
			<div class="aui-btn" style="margin:auto;background:rgba(0,90,147,1);color:#ffffff;line-height: 2.4rem;">
				发布会员秀
			</div>
		</div>

		<div v-if="hah" class="">
			<div class="aui-mask aui-mask-in"></div>
			<div class="agreement">
				<p class="title_agreement">发布协议</p>
				<div v-html="xieyi" class="" style="overflow-y:auto;height:8rem;padding:0 0.75rem;color:#444444;font-size:0.7rem;font-family:PingFangSC-Regular;"></div>
				<div class="btn_agreement">
					<div class="left_btn" tapmode onclick="close_win()">
						不同意
					</div>
					<div class="right_btn" tapmode onclick="agree_new()">
						同意
					</div>
				</div>


			</div>
			<!-- <div class="aui-dialog aui-dialog-in" style="top: 50%;transform: translate(0,-50%) !important;">
				<div class="aui-dialog-header">发布协议</div>
				<div class="aui-dialog-body">
					<div class="" v-html="xieyi"></div>
				</div>
				<div class="aui-dialog-footer">
					<div class="aui-dialog-btn" tapmode onclick="close_win()">不同意</div>
					<div class="aui-dialog-btn" tapmode onclick="agree()">同意</div>
				</div>
			</div> -->
		</div>
	</div>
</body>

<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/vue.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/aui-dialog.js"></script>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> -->
<script src="../../../script/vant.min.js"></script>
<script>
	// 视频拍摄页面传回视频url
	function videoUp(url) {
		// alert(url)
		vm.uploadFtpVideo(url);
	}
	var vm = new Vue({
		el: "#app",
		data() {
			return {
				title        : '',
				content      : '',
				xieyi        : '',
				img          : [],
				imgpath      : [],
				is_agree     : true,
				videoLength  : 12, //视频长度
				videoUrl     : [], //视频地址
				videoType    : 1, //视频类型
				tempBase64   : '', //临时封面
				videoSize    : 0, //临时视频大小数据存放
				systemType   : '', //系统
				percent      : 0, //进度
				subClick     : true, //防止多次点击
				video        : [],
				video_img    : [],
				hah          :true,
				showfbimgmenu:false,
			}
		},
		methods: {

			onCancel() {
	      vm.showfbimgmenu = false;
	    },
			delimg: function(index) {
				vm.img.splice(index, 1)
				vm.imgpath.splice(index, 1)
			},
			get_xiye: function() {
				get_data('api/page/details', {
					title: '发布协议'
				}, function(ret) {
					if (ret.status) {
						vm.xieyi = ret.data.content;
						// argement();
					}
				})
			},
			// 安卓端视频处理并传给上传模块
			uploadAndroid: function(url) {
				console.log('走安卓端')
				vm.uploadVideo(url)
			},

			// ios端视频处理并传给上传模块
			uploadIos: function(url) {
				console.log('走苹果端')
					// 视频格式转换
				var videoTrans = api.require('videoTrans');
				videoTrans.movToMp4({
					path: url,
				}, function(ret) {
					if (ret) {
						vm.uploadVideo(ret.destPath);
					}
				});
			},

			// 视频上传前判断大小
			uploadVideo: function(url) {
				console.log("视频上传前判断大小")
					// 判断文件大小
				var fs = api.require('fs');
				fs.getAttribute({
					path: url
				}, function(res, err) {
					if (res.status) {
						var fileSize = res.attribute.size / 1024 / 1024;
						if (parseInt(fileSize) < 200) {
							//调用上传到服务器
							vm.uploadFtpVideo(url);
						} else {
							toast('视频大小请勿超过50m!');
							return;
						}
					} else {
						api.hideProgress();
						toast('视频上传失败，请重试！')
						return;
					}
				});
			},

			//上传到服务器
			uploadFtpVideo: function(url) {
				console.log('上传视频' + url);
				var videoScreenshots = api.require('videoScreenshots');
				videoScreenshots.screenshots({
					videoUrl: url,
					time: 1,
					isAblum: true,
					name: new Date().getTime()
				}, function(ret) {
					//alert(JSON.stringify(ret))
					// 封面图
					vm.tempBase64 = ret.path;
					upload(url, vm.tempBase64); //视频
				});
				vm.videoUrl = [];
				vm.videoUrl.push(url);

				vm.imageName = [];
				var tempImageName = new Date().getTime() + url.replace(/[^\/]*[\/]+/g, '');
				vm.imageName.push(tempImageName);
			},
		}
	})

	function paizhao() {
		//拍摄照片
		api.getPicture({
			sourceType: 'camera',
			encodingType: 'jpg',
			mediaValue: 'pic',
			// allowEdit: true,
			destinationType: 'url',
			quality: 92,
		}, function(ret, err) {
			if (ret) {
				if (ret.data != '') {
					//alert(JSON.stringify(ret))
					post_img('api/UpFiles/upload', ret.data, function(ret) {
						vm.img.push(ret.data.pic_id);
						vm.imgpath.push(ret.data.url);
						//vm.video.push(ret.data.url);
					})
				}
			}else { //录像
				openWin('my/publish/publishing_video_shooting', {
					time: vm.videoLength
				})
			}
		});
		vm.showfbimgmenu = false;
	}
	function xcXuanze() {
		// api.getPicture({
		// 	sourceType: 'picture',
		// 	mediaValue: 'jpg',
		// 	destinationType: 'url',
		// }, function(ret, err) {
		// 	if (ret) {
				// 上传图片
				var max = 3 - vm.img.length;
				if (max < 1) {
					return;
				}
				select_album(max, function(ret) {
					var pic_path = ret.path
						// alert(pic_path)
					post_img('api/UpFiles/upload', pic_path, function(ret) {
						vm.img.push(ret.data.pic_id);
						vm.imgpath.push(ret.data.url);
						//vm.video.push(ret.data.url);
					})
			// 	})
			// }
		})
			// 本地视频选择
				// api.getPicture({
				// 	sourceType: 'album',
				// 	mediaValue: 'video',
				// 	destinationType: 'url',
				// }, function(ret, err) {
				// 	if (ret) {
				// 		if (ret.duration > vm.videoLength) {
				// 			toast('只能分享' + vm.videoLength + '秒以内的视频，请编辑后重新上传！');
				// 		} else {
				// 			if (api.systemType == 'ios') {
				// 				vm.uploadIos(ret.data)
				// 			} else {
				// 				vm.uploadAndroid(ret.data)
				// 			}
				// 		}
				// 	} else {
				// 		toast('该视频格式错误，请重试！')
				// 	}
				// });
				vm.showfbimgmenu = false;
	}

	function upload(url, img) {

		post_img('api/UpFiles/upload', img, function(ret_img) {
			//alert(JSON.stringify(ret))
			//vm.img.push(ret_img.data.pic_id);
			vm.video_img.push(ret_img.data.pic_id);
			vm.imgpath.push(ret_img.data.url);
			vm.video.push(url)
			// if(ret.AccessUrl.indexOf('http://')){
			// 	vm.video.push('http://'+ret.AccessUrl)
			// }else {
			// 	vm.video.push(ret.AccessUrl)
			// }
		})

		// var demo = api.require('tencentOSS');
		// demo.initUploadService({
		// 	appid: '1259675504',
		// 	secretId: 'AKIDDTVLDu2by83kElu3peGRSFqCYklBoprg',
		// 	secretKey: 'xHbhYFgssc5QYR7pIVS9eBTXMvEG3EG3',
		// 	region: 'ap-chengdu'
		// }, function(ret, err) {
		// 	// api.toast({
		// 	// 	msg: JSON.stringify(ret) + " " + JSON.stringify(err)
		// 	// });
		// 	demo.uploadFile({
		// 		bucketName: 'baoquan-1259675504', //"存储桶名称";
		// 		cosPath: url, //"远端路径，即存储到 COS 上的绝对路径";
		// 		srcPath: url, //"本地文件的绝对路径";
		// 	}, function(ret, err) {
		// 		if (ret.evenType == 'onSuccess') {
		// 			//alert(img)
		// 			post_img('api/UpFiles/upload', img, function(ret_img) {
		// 				//alert(JSON.stringify(ret))
		// 				//vm.img.push(ret_img.data.pic_id);
		// 				vm.video_img.push(ret_img.data.pic_id);
		// 				vm.imgpath.push(ret_img.data.url);
		// 				if(ret.AccessUrl.indexOf('http://')){
		// 					vm.video.push('http://'+ret.AccessUrl)
		// 				}else {
		// 					vm.video.push(ret.AccessUrl)
		// 				}
		// 			})
		// 		}
		//
		// 		//vm.img.push(ret.data.pic_id);
		// 		//vm.imgpath.push(ret.data.url);
		// 		console.log(JSON.stringify(ret))
		// 		api.toast({
		// 			msg: JSON.stringify(ret) + " " + JSON.stringify(err)
		// 		});
		// 	});
		// 	// api.toast({
		// 	// 	msg: JSON.stringify(ret) + " " + JSON.stringify(err)
		// 	// });
		// });
	}

	function xyqPublish() {
		if (vm.title == '') {
			toast('请输入标题');
			return;
		}
		if (vm.content == '') {
			toast('请输入内容');
			return;
		}
		var content = vm.content
			content = ucs2_to_utf16(content)
		var title = vm.title
			title = ucs2_to_utf16(title)
		get_data('api/xiaoyouquan/xyqPublish', {
			token: $api.getStorage('token'),
			title: title,
			content: content,
			img: vm.img.join(','),
			video: vm.video.join(','),
			video_img: vm.video_img.join(','),
		}, function(ret) {
			toast(ret.msg)
			if (ret.status) {
				vm.title = ''
				vm.content = ''
				vm.img = []
				vm.imgpath = []
				vm.video = []
				vm.video_img = []
				send_event('publishok')
			}
		})
	}
	apiready = function() {
		auth_first_open();
		vm.get_xiye();
		// 监听退出
		// api.sendEvent({
		//     name: 'back',
		//     extra: {
		//         msg: '666'
		//     }
		// });
		api.addEventListener({
			name: 'back'
		}, function(ret, err) {
			if (vm.title == '' && vm.content == '') {
				api.sendEvent({
					name: 'back_return',
					extra: {
						msg: '无值'
					}
				});
			} else {
				api.sendEvent({
					name: 'back_return',
					extra: {
						msg: '有值'
					}
				});

			}

		});
		add_event('shootingUp', function(ret) {
			var url = ret.videoPath;
			vm.uploadFtpVideo(url);
		})

	}

	function auth_first_open() {
		if (!$api.getStorage('first_open_publish')) {
			vm.is_agree = false
		}
	}

	function agree() {
		$api.setStorage('first_open_publish', '1')
		vm.is_agree = true;
	}

	function functionName() {
		// var dialogBox = api.require('dialogBox');
		// dialogBox.alert({
		// 	texts: {
		// 		title: '提示',
		// 		content: '发布协议',
		// 		leftBtnTitle: '不同意',
		// 		rightBtnTitle: '同意'
		// 	},
		// 	styles: {
		// 		bg: '#fff',
		// 		w: 260,
		// 		corner: 6,
		// 		title: {
		// 			marginT: 20,
		// 			titleSize: 17,
		// 			titleColor: '#444444'
		// 		},
		// 		content: {
		// 			marginT: 0,
		// 			marginB: 15,
		// 			color: '#444444',
		// 			size: 17
		// 		},
		// 		left: {
		// 			marginB: 0,
		// 			marginL: 0,
		// 			w: 130,
		// 			h: 50,
		// 			corner: 6,
		// 			bg: 'widget://image/ico/ico_btn_left_bg.png',
		// 			color: '#999999',
		// 			size: 16
		// 		},
		// 		right: {
		// 			marginB: 0,
		// 			marginL: 0,
		// 			w: 130,
		// 			h: 50,
		// 			corner: 6,
		// 			bg: '#fff',
		// 			color: '#72D5EF',
		// 			size: 16
		// 		},
		// 		horizontalLine: {
		// 			color: '#ccc',
		// 			height: 1
		// 		}
		// 	}
		// }, function(ret) {
		// 	if (ret.eventType == 'left') {
		// 		var dialogBox = api.require('dialogBox');
		// 		dialogBox.close({
		// 			dialogName: 'alert'
		// 		});
		// 	} else if (ret.eventType == 'right') {
		// 		agree()；
		// 		// get_data('api/xiaoyouquan/xyqDelPublish', {
		// 		// 	token: $api.getStorage('token'),
		// 		// 	id: id
		// 		// }, function(ret) {
		// 		// 	if (ret.status) {
		// 		// 		toast(ret.msg)
		// 		// 		vm.page = 1;
		// 		// 		vm.loadmore = true;
		// 		// 		vm.info = [];
		// 		// 		vm.get_list();
		// 		// 	}
		// 		// })
		// 		// var dialogBox = api.require('dialogBox');
		// 		// dialogBox.close({
		// 		// 	dialogName: 'alert'
		// 		// });
		// 	}
		// });
	}

	// function argement() {
	// 	var dialogBox = api.require('dialogBox');
	// 	dialogBox.alert({
	// 		texts: {
	// 			title: '发布协议',
	// 			content: vm.xieyi,
	// 			leftBtnTitle: '不同意',
	// 			rightBtnTitle: '同意'
	// 		},
	//
	// 		styles: {
	// 			bg: '#fff',
	// 			w: 295,
	// 			corner: 10,
	// 			title: {
	// 				marginT: 20,
	// 				titleSize: 17,
	// 				titleColor: '#444444'
	// 			},
	// 			content: {
	// 				marginT: 18,
	// 				marginB: 30,
	// 				color: '#444444',
	// 				size: 17
	// 			},
	// 			left: {
	// 				marginB: 0,
	// 				marginL: 0,
	// 				w: 147.5,
	// 				h: 55,
	// 				corner: 10,
	// 				// bg: 'widget://image/ico/ico_btn_left_bg.png',
	// 				bg: "#fff",
	// 				color: '#999999',
	// 				size: 16
	// 			},
	// 			right: {
	// 				marginB: 0,
	// 				marginL: 0,
	// 				w: 147.5,
	// 				h: 55,
	// 				corner: 10,
	// 				bg: '#fff',
	// 				color: '#72D5EF',
	// 				size: 16
	// 			},
	// 			horizontalLine: {
	// 				color: '#EEEEEE',
	// 				height: 1
	// 			},
	// 			verticalLine: {
	// 				color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
	// 				width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
	// 			}
	// 		}
	// 	}, function(ret) {
	// 		if (ret.eventType == 'left') {
	// 			var dialogBox = api.require('dialogBox');
	// 			dialogBox.close({
	// 				dialogName: 'alert'
	// 			});
	// 			close_win()
	// 		}
	//
	// 		if (ret.eventType == 'right') {
	// 			var dialogBox = api.require('dialogBox');
	// 			dialogBox.close({
	// 				dialogName: 'alert'
	// 			});
	// 			$api.setStorage('first_open_publish', '1')
	// 			vm.is_agree = true;
	// 		}
	// 	});
	// }

	function agree_new() {
		send_event('close_mask');
		vm.hah = false
	}
</script>

</html>
